<template>
  <div class="main">
    <div class="top">
      <div class="back">
        <img @click="clickBack" src="../../assets/img/icon/jiantou_left.svg">
        <span>返回</span>
      </div>
      <span>意见反馈</span>
    </div>
    <div v-if="flag">
    <div id="label1">反馈内容：<img src="../../assets/img/icon/uploader_personal_asterisk.svg"></div>
    <textarea class="content" v-model="textContent"></textarea>
    <div id="label2">联系方式：</div>
      <input type="text" class="phone"  v-model="phone">
    <div id="but" @click="clickButton">确认提交</div>
    </div>
    <div v-else class="thanks">
      <img src="../../assets/img/icon/pluto-delivery-1.svg">
      <div class="sending"><span>传送给产品经理中…</span><br><span>谢谢您的建议~</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Opinion',
  data () {
    return {
      flag: true,
      phone: null,
      textContent: ''
    }
  },
  methods: {
    clickButton: function () {
      this.flag = false
    },
    clickBack: function () {
      this.$router.push({ name: 'Emine' })
    }
  }
}
</script>

<style scoped lang="scss">
  .main{
    width: 100%;
    height: 100%;
    background: $background-color;
  }
  .top{
    position: fixed;
    top: 0;
    width: 100%;
    height: px2rem(44);
    background: white;
    display: flex;
    align-items: center;
    span{
      font-size:px2rem(18);
      font-family:PingFang SC;
      font-weight:400;
      line-height:px2rem(25);
      color:rgba(38,38,38,1);
      /*margin-left: px2rem(93);*/
      margin-left:  calc(50% - #{px2rem(30)});
      justify-content: center;
    }
    .back{
      position: absolute;
      /*width: px2rem(46);*/
      width: 12.27%;
      height: 100%;
      /*margin-left: px2rem(13);*/
      margin-left: 3.47%;
      display: flex;
      align-items: center;
      /*flex-wrap: nowrap;*/
      span{
        font-size:px2rem(14);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(20);
        color:rgba(38,38,38,1);
        margin-left: px2rem(3);
        white-space: nowrap;
      }
      img{
        width: px2rem(16);
        height: px2rem(14);
      }
    }
    }
  #label1{
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:bold;
    line-height:px2rem(25);
    color:rgba(38,38,38,1);
    /*margin-left: px2rem(28);*/
    margin-left: calc(50% - #{px2rem(159)});
    margin-top: px2rem(64);
    img{
      white-space: px2rem(9);
      height: px2rem(10);
    }
  }
  .content{
    width: px2rem(319);
    height: px2rem(165);
    /*margin-left: px2rem(28);*/
  margin-left: calc(50% - #{px2rem(159)});
    margin-top: px2rem(6);
    font-size: px2rem(14);
    font-weight: 500;
    line-height: px2rem(25);
  }
  #label2{
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:bold;
    line-height:px2rem(25);
    color:rgba(38,38,38,1);
    /*margin-left: px2rem(28);*/
    margin-left: calc(50% - #{px2rem(159)});
    margin-top: px2rem(12);
  }
  input{
    width: px2rem(319);
    height: px2rem(36);
    margin-top: px2rem(6);
    /*margin-left: px2rem(28);*/
    margin-left: calc(50% - #{px2rem(159)});
    font-size: px2rem(14);
    font-weight: 500;
  }
  #but{
    width: px2rem(277);
    height: px2rem(44);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:500;
    line-height:px2rem(25);
    color:rgba(255,255,255,1);
    /*margin-left: px2rem(49);*/
    margin-left: calc(50% - #{px2rem(139)});
    margin-top: px2rem(55);
    background: url("../../assets/img/icon/uploader_personal_btn_sub.svg");
    background-size: 100% 100%;
  }
  .thanks{
    img{
      width: px2rem(110);
      height: px2rem(140);
      margin-top: px2rem(154);
      margin-left: px2rem(132);
    }
    .sending{
      width: px2rem(124);
      height: px2rem(60);
      display: flex;
      flex-direction: column;
      justify-items: flex-start;
      align-items: center;
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:400;
      line-height:px2rem(20);
      color:rgba(188,191,196,1);
      margin-left: px2rem(126);
      margin-top: px2rem(31);
      span{
        margin-top: 0;
      }
    }
  }
</style>
